<template>
    <view>
        <!-- 头部搜索框 -->
        <YgSearch></YgSearch>

        <!-- 导航栏 -->
        <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#ea4350"></u-tabs>

        <!-- 商品 -->
        <view v-if="current===0" class="goods_content">
            <!-- 商品列表 -->
            <navigator class="goods-item u-flex u-margin-bottom-10 u-padding-10" v-for="(item, index) in goodslist" :key="item.goods.id" :url="'/pages/details/details?id='+item.goods_id">
                <!-- 左边商品图片 -->
                <view class="goods_img u-flex-1" >
                    <u-image :src="item.goods_small_logo" mode="widthFix" width="80%"></u-image>
                </view>

                <!-- 右边 商品内容以及价格 -->
                <view class="goods-info u-flex-2">
                    <view class="goods_name">{{index}} {{item.goods_name}}</view>
                    <view class="goods_price">￥{{item.goods_price}}</view>
                </view>
            </navigator>

        </view>
        <!-- 销量 -->
        <view v-else-if="current===1">销量</view>
        <!-- 价格 -->
        <view v-else-if="current===2">价格</view>
    </view>
</template>

<script>
// 全局接口 需要传的参数
let params = {
        // 关键字
    query:'',           
    // 分类id
    cid:'',             
    // 页码
    pagenum:1,         
    // 页容量
    pagesize:10, 
};
//  全局 变量 总条数 页数
let totalPages=1
export default {
    data(){
        return{
            // 请求数组数据
            goodslist:[],
            // 导航栏
            list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格',
				}],
				current: 0
			}
        },
        methods: {
            // 导航栏点击下面划线 相应
			change(index) {
				this.current = index;
			},
            // 封装请求数据
            async getGoods(callback){
                // 请求后台数据  params 接口携带 参数
                const res = await this.$u.get("/goods/search", params)  
                console.log(res);
                // 下拉后 页面新数组 与久数组拼接显示
                this.goodslist= [...this.goodslist, ...res.message.goods]
                // 获取 总条数  总页数
                totalPages=Math.ceil( res.message.total / params.pagesize)
                // console.log("请求回来");
                // 短路运算  异步
                callback&&callback()
            }
		},
    async onLoad(opiton){
        const { id } = opiton
        // console.log(id);
        // const id = 10
        params.cid = id
        // 数据请求
        this.getGoods()
    },
    // 滚动条到底部触发事件  (数据加载)
    onReachBottom(){
        // 判断又没有下一页数据
        if(params.pagenum >= totalPages){
            // 没有数据uni组件提示
            uni.showToast({
                title:'木有内容啦',
                icon:"none"
            })
        }else{
            // 页码增加
            params.pagenum++
            // 重新刷新一次数据
            this.getGoods()
        }
    },
    onPullDownRefresh(){
        // 上拉清空数组
        this.goodslist=[],
        // 页数放回1页
        params.pagenum=1
        // 下拉数据请求回来就关闭上拉窗口  采用了回调函数
        this.getGoods(function(){
            // console.log("关闭上拉");
            // 关闭上拉窗口
            uni.stopPullDownRefresh()
        })
    }
}
</script>

<style lang="scss">
.goods-item{
    align-items: stretch;
    border-bottom: 1px solid #eee;
}
.goods-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods_price{
        color:$themeColor;
    }
}
</style>